<template>
	<uni-nav-bar left-icon="left" :title="tarDishName"  :border="false" style="border-bottom: 1px solid #eee;font-weight: bold;" @clickLeft="back" />
	<view v-if="is_loading">
		<uni-load-more iconType="circle" :status="loadingState" style="margin-top: 50%;"/>
	</view>
	<view v-else class="page-root" v-for="item, index in tarDishData" :index="index" :key="index">
		<view style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);height: 100%;background-color: #ffffff;margin: 20px;">
			<view class="foot-img"> 
				<image :src="item.img" style="width: 90%;margin-top: 15px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);"/>
				
			</view>
			<view class='T1'>
				<p>
					<h2 style="font-size: 30px;letter-spacing: 3px;">{{item.name}}</h2>
					<text style="font-size: 6px;color:#878787;">收藏 {{item.savedCount}} &nbsp; 热度 {{item.popular}}k</text>
				</p>
				<p style="font-size: 15px;color: #000000;margin-top: 10px;">{{item.desc}}</p>
				<p style="width: 100%;margin-top:25px">
					<uni-icons type="fire" style="font-size: 15px;">&nbsp; 设备&nbsp;{{item.equipment}}</uni-icons>
				</p>
				<p style="width: 100%;font-size: 9px;margin-top:10px">
					<uni-icons type="flag" style="font-size: 15px;">&nbsp; 时间&nbsp;{{item.time_m}}分钟{{item.time_s}}秒</uni-icons>
					<uni-icons type="checkbox" style="font-size: 15px;margin-left: 65px;">&nbsp; 难度&nbsp;{{item.difficult}}</uni-icons>
				</p>
			</view>
		</view>
		<view class="T2">
			<uni-table ref="table"  emptyText="暂无数据" >
				<uni-tr>
					<uni-th  width="50" align="left" style="font-size: 20px;color: #000000;">食材</uni-th>
					<uni-th width="50" align="center"></uni-th>
					<uni-th width="50" align="center"></uni-th>
					
				</uni-tr>
				<uni-tr v-for="list in item.ngredientsi" :key="list.name" >
					<uni-td style="font-size: 15px;">{{list.name}}</uni-td>
					<uni-td></uni-td>
					<uni-td align="right" style="font-size: 15px;"> {{list.weight}} g</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th  width="50" align="left" style="font-size: 20px;color: #000000;">配料</uni-th>
					<uni-th width="50" align="center"></uni-th>
					<uni-th width="50" align="center"></uni-th>
				</uni-tr>
				<uni-tr v-for="list in item.condiments" :key="list.name">
					<uni-td style="font-size: 15px;">{{list.name}}</uni-td>
					<uni-td></uni-td>
					<uni-td align="right" style="font-size: 15px;"> {{list.weight}} g</uni-td>
				</uni-tr>
			</uni-table>
		</view >
		<view class="T2">
			<view style="padding-top: 15px;">
				<text style="width: 100%;font-size: 20px;color: #000000;font-weight: bold;" >教程</text>
			</view>
			<view style="margin-top: 20px;" v-for="itm, indx in item.cookStep" :index="indx" :key="indx">
				<text style="font-size: 18px;">
					步骤<text style="font-size: 16px;">{{indx+1}}/{{item.cookStep.length}}</text>
				</text>
				<image :src="itm.image" style="width: 100%;margin-top: 15px;border-radius: 10px;"></image>
				<view style="width: 100%;margin-top: 10px;">
					<text >{{itm.text}}</text>
				</view>
				
				
				<view style="height: 10px;padding-top: 25px;">
					<view  v-if="indx+1 != item.cookStep.length" class="divider"></view>
					
				</view>
				
			</view>
		</view>
	</view>

</template>

<!-- <template>
	<uni-nav-bar left-icon="left" :title="tarDishName"  :border="false" style="width: 100%;border-bottom: 1px solid #eee;font-weight: bold;" @clickLeft="back" />
	<view class="page-root" v-for="item, index in tempData" :index="index" :key="index">
		<view style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);height: 100%;background-color: #ffffff;margin: 20px;">
			<view class="foot-img"> 
				<image :src="item.img" style="width: 90%;margin-top: 15px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);"/>
				
			</view>
			<view class='T1'>
				<p>
					<h2 style="font-size: 30px;letter-spacing: 3px;">{{item.name}}</h2>
					<text style="font-size: 6px;color:#878787;">收藏 {{item.savedCount}} &nbsp; 热度 {{item.popular}}k</text>
				</p>
				<p style="font-size: 15px;color: #000000;margin-top: 10px;">{{item.desc}}</p>
				<p style="width: 100%;margin-top:25px">
					<uni-icons type="fire" style="font-size: 15px;">&nbsp; 设备&nbsp;{{item.equipment}}</uni-icons>
				</p>
				<p style="width: 100%;font-size: 9px;margin-top:10px">
					<uni-icons type="flag" style="font-size: 15px;">&nbsp; 时间&nbsp;{{item.time_m}}分钟{{item.time_s}}秒</uni-icons>
					<uni-icons type="checkbox" style="font-size: 15px;margin-left: 65px;">&nbsp; 难度&nbsp;{{item.difficult}}</uni-icons>
				</p>
			</view>
		</view>
		<view class="T2">
			<uni-table ref="table"  emptyText="暂无数据" style="padding-bottom: 20px;padding-top: 10px;">
				<uni-tr>
					<uni-th  width="50" align="left" style="font-size: 20px;color: #000000;">食材</uni-th>
					<uni-th width="50" align="center"></uni-th>
					<uni-th width="50" align="center"></uni-th>
					
				</uni-tr>
				<uni-tr v-for="list in item.ngredientsi" :key="list.name" >
					<uni-td style="font-size: 15px;">{{list.name}}</uni-td>
					<uni-td></uni-td>
					<uni-td align="right" style="font-size: 15px;"> {{list.weight}} g</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th  width="50" align="left" style="font-size: 20px;color: #000000;">配料</uni-th>
					<uni-th width="50" align="center"></uni-th>
					<uni-th width="50" align="center"></uni-th>
				</uni-tr>
				<uni-tr v-for="list in item.condiments" :key="list.name">
					<uni-td style="font-size: 15px;">{{list.name}}</uni-td>
					<uni-td></uni-td>
					<uni-td align="right" style="font-size: 15px;"> {{list.weight}} g</uni-td>
				</uni-tr>
			</uni-table>
		</view >
		<view class="T2">
			<view style="padding-top: 15px;">
				<text style="width: 100%;font-size: 20px;color: #000000;font-weight: bold;" >教程</text>
			</view>
			<view style="margin-top: 20px;" v-for="itm, indx in item.cookStep" :index="indx" :key="indx">
				<text style="font-size: 18px;">
					步骤<text style="font-size: 16px;">{{indx+1}}/{{item.cookStep.length}}</text>
				</text>
				<image :src="itm.image" style="width: 100%;margin-top: 15px;border-radius: 10px;"></image>
				<view style="width: 100%;margin-top: 10px;">
					<text >{{itm.text}}</text>
				</view>
				
				
				<view style="height: 10px;padding-top: 25px;">
					<view  v-if="indx+1 != item.cookStep.length" class="divider"></view>
					
				</view>
				
			</view>
		</view>
	</view>

</template> -->

<script setup lang="ts">

//前页面传菜谱id，后端查询对应id
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';


/*
菜谱
	菜谱名 string
	描述
	收藏
	热度
	设备
	时间
	难度
	食材 Object	根据菜谱id查询对应的食材
	营养参数 	根据菜谱id查询对应的参数
	备菜步骤     根据菜谱id查询对应的图片与步骤文本 JSON
	做法步骤     根据菜谱id查询对应的图片与步骤文本
*/



interface cookStepObj{
	image:string,
	text:string
}
// const db = uniCloud.databaseForJQL()

// // 使用`jql`查询list表内`name`字段值为`hello-uni-app`的记录
// db.collection('dish')
//   .where('name == "白切鸡"')
//   .get()
//   .then((res)=>{
//     // res 为数据库查询结果
// 	console.log("查到的数据",res)
//   }).catch((err)=>{
//     // err.message 错误信息
//     // err.code 错误码
//   })

//步骤数据
let cookStep:cookStepObj[] = [
	{
		image:'https://img.xiaochushuo.com/web/258771756.jpg!wd320',
		text:'·食材· 牛肉 200g、河粉 350g、鸡蛋 1个 豆芽 50g、韭黄 100g、小葱 50g 生抽 15g、老抽 10g、糖 3g、盐 1g、淀粉 3g'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771683.jpg!wd320',
		text:'先将牛肉切片 '
	},
	{
		image:'https://img.xiaochushuo.com/web/258771686.jpg!wd320',
		text:'加生抽、老抽、糖，抓匀'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771687.jpg!wd320',
		
		text:'再加入鸡蛋清、水淀粉、蛋黄，抓匀'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771689.jpg!wd320',
		text:'碗中倒入生抽、老抽、盐、糖，搅拌均匀'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771688.jpg!wd320',
		text:'热锅冷油，下牛肉迅速滑熟'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771684.jpg!wd320',
		text:'另起油锅，油温升至160°下河粉炒熟'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771690.jpg!wd320',
		text:'过完鸡丁的油，放入葱姜炝锅'
	},
	{
		image:'https://img.xiaochushuo.com/web/258339013.jpg!wd320',
		text:'热锅冷油，放豆芽、葱段爆香'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771691.jpg!wd320',
		text:'加河粉、牛肉翻炒'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771692.jpg!wd320',
		text:'加入调料汁，炒至汁水收干'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771693.jpg!wd320',
		text:'最后，撒入韭黄，葱段炒匀即可'
	},
	{
		image:'https://img.xiaochushuo.com/web/258771694.jpg!wd320',
		text:'开吃啦~！'
	}
	
];

function back() {
	uni.navigateBack({
		delta: 1
	})
}

// onMounted(()=>{
// 	let datad = ref([]);
// 	uniCloud.callFunction({
// 		name: "getdata",
// 		data: {
	
// 		}
// 	}).then(res => {
// 		datad.value = res.result.data
// 		console.log(datad.value);
// 	})
// })






//配料
interface condiment{
	name:string,
	weight:number
}
//步骤
interface cookStep{
	image:string,
	text:string
}
//食材
interface ngredientsi{
	name:string,
	weight:number
}
class dishDetail{
	_id:string
	name:string
	save:number
	popular:number
	discr:string
	condiments:condiment[]
	cookStep:cookStep[]
	desc:string
	difficult:string
	equipment:string
	img:string
	ngredientsi:ngredientsi[]
	savedCount:number
	time_m:number
	time_s:number
	constructor(_id:string,name:string,save:number,popular:number,discr:string,condiments:condiment[],cookStep:cookStep[],desc:string,difficult:string,equipment:string,img:string,ngredientsi:ngredientsi[],savedCount:number,time_m:number,time_s:number){
		this._id = _id;
		this.condiments = condiments;
		this.cookStep = cookStep;
		this.desc =desc ;
		this.difficult =difficult ;
		this.discr =discr ;
		this.equipment = equipment;
		this.img = img;
		this.name = name;
		this.ngredientsi = ngredientsi;
		this.popular = popular;
		this.save = save;
		this.savedCount = savedCount;
		this.time_m = time_m;
		this.time_s = time_s;
	}
	
}

//临时调试变量
let tempData :dishDetail[] = [
	{
		_id:"asdasdasd",
		name:"干炒牛河",
		save:5,
		popular:3.36,
		discr:"每个广东人的宵夜必备",
		condiments:[
			{
				name:'食用油',
				weight:30
			},
			{
				name:'生抽',
				weight:15
			},
			{
				name:'小葱',
				weight:10
			},
			{
				name:'老抽',
				weight:5
			},
			{
				name:'盐',
				weight:5
			},
			{
				name:'糖',
				weight:5
			}
		],
		cookStep:cookStep,
		desc:"每个广东人的宵夜必备",
		difficult:"简单",
		equipment:"灶具",
		img:"http://img.xiaochushuo.com/web/258903898.jpg!s4",
		ngredientsi:[
			
			{
				name:'河粉',
				weight:200
			},
			{
				name:'牛肉',
				weight:100
			},
			{
				name:'绿豆芽',
				weight:30
			},
			{
				name:'淀粉',
				weight:5
			},
			{
				name:'鸡蛋',
				weight:1
			}
			
			
		],
		savedCount:12,
		time_m:6,
		time_s:Number("")
	}
] 

let tarDishData:dishDetail[] = reactive([])

// function getDish(data: any){
// 	console.log("【数据】",data)
// 	let ds:dishDetail[] = data
// 	Object.assign(tarDishData,ds)
// 	console.log("【获取到的数据】",tarDishData)
// }



let tarName = ref("")
let tarDishName = ref('');
const route = useRoute();

onBeforeMount(() => {
  // 读取路由参数
  tarName.value = route.query.name as string;
  tarDishName.value = tarName.value.slice(1,-1);
  
  console.log("【拿到的数据】",tarName.value)
});

let is_loading = ref(false);
let loadingState = 'loading'
onMounted(()=>{
	is_loading.value = !is_loading.value;
	const db = uniCloud.database() //代码块为cdb
	db.collection('dish')
		.where("name=="+tarName.value)
		.get()
		.then((res)=>{
	    // res 为数据库查询结果
		console.log("【data】",res)
		is_loading.value = !is_loading.value;
		Object.assign(tarDishData,res.result.data)
		
		}).catch((err)=>{
			console.log(err.code); // 打印错误码
			console.log(err.message); // 打印错误内容
	  })

})
  



</script>

<style>

.page-root{

	width: 100%;
	text-align: center;
	background-color: #f7f7f7;
	padding-bottom: 10px;
	
}
.divider {
background: #c0c2bb;
width: 100%;
height: 1rpx;
}

.T1{
	
	width: 100%;
	height: 170px;
	padding: 20px;
	text-align: start;
	
}
.T2{
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	
	margin: 20px;
	background-color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	text-align: start;
}
</style>
